<template>
  <view class="tp-rest-card">
    <view class="view-title-wrapper">
      <view class="time-wrapper">
        <ai-icon type="icon-time" color="var(--brand-2)"></ai-icon>
        <text class="range">{{times}}</text><text class="range" v-if="title">{{title}}</text>
      </view>
    </view>
    <view class="content" v-if="text"><text>{{text}}</text></view>
  </view>
</template>

<script>
  export default {
    name:"tp-rest-card",
    props: {
      title: String,
      times: String,
      text: String
    },
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss">
@import "@/styles/_var.scss";
.tp-rest-card {
  overflow: hidden;
  background: $card-bg;
  border-radius: $card-border-radius;
  box-shadow: var(--shadow-2);
  padding: $card-padding;
  
  .view-title-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: $gutter * 0.5;
    
    .time-wrapper {
      display: flex;
      flex-direction: row;
      align-items: center;
      
      .range {
        padding-left: 6px;
      }
    }
  }
  .content {
    color: var(--gray-2);
    line-height: 1.4;
    padding-top: $gutter;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
}
</style>